<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    :footer="null"
     @cancel="handleCancel"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }">
    <!-- 搜索区域-begin -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col  :md="10" :sm="12">
             <a-form-item label="时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
               <a-range-picker
                 style="width: 260px"
                 v-model="queryParam.createTimeRange"
                 format="YYYY-MM-DD"
                 :placeholder="['开始时间', '结束时间']"
                 @change="onDateChange"
               />
             </a-form-item>
            </a-col>
            <a-col  :md="14" :sm="12">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="getWeatherData" icon="search">查询</a-button>
                <a-button type="primary" @click="reSet" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    <!-- 搜索区域-end -->
    <line-chart-multid v-if="visitInfo.length !== 0" :fields="visitFields" :dataSource="visitInfo" :aliases="aliases" :height="400"></line-chart-multid>
    <div class="empty" v-else>
      <span>未找到相关的数据</span>
    </div>
  </j-modal>
</template>

<script>
  import LineChartMultid from '@/components/chart/LineChartMultid'
  import {getVisitInfo } from '@/api/api'
  import { httpAction, getAction } from '@/api/manage'
  import moment from 'moment'
  export default{
    name:'TrendChart',
    components: {
      LineChartMultid
    },
    data () {
      return {
        title:'',
        deviceName:'',
        width:900,
        visible: false,
        disableSubmit: false,
        visitFields:['noises','pm25s','pm1s','mhumis'],
        visitInfo:[],
        url: {
          list: "/corp/weatherData/list",
          delete: "/corp/weatherData/delete",
          deleteBatch: "/corp/weatherData/deleteBatch",
          exportXlsUrl: "/corp/weatherData/exportXls",
          importExcelUrl: "/corp/weatherData/importExcel",
          
        },
        aliases:[
          {field:'noises',alias:'单位dB'},
          {field:'pm25s',alias:'pm25值'},
          {field:'pm1s',alias:'pm10值'},
          {field:'mhumis',alias:'测量湿度'},
        ],
        // 查询条件
         queryParam:{
           pageNo:1,
           pageSize:10,
           createTime_begin:'',
           createTime_end:'',
          createTimeRange:[],
         },
         wrapperCol: {
           xs: { span: 10 },
           sm: { span: 16 },
         },
         labelCol: {
           xs: { span: 1 },
           sm: { span: 2 },
         },
         date:null
      }
    },
    methods:{
      open(e){
       this.initDate()
        this.visible = true
        this.$nextTick(()=>{
           this.$set(this.queryParam,'deviceId',e.deviceId)
           this.getWeatherData()
        })
      },
      initDate(){
        let date = new Date()
        this.date = moment(date).format('YYYY-MM-DD')
        this.queryParam.createTimeRange = [moment(this.date),moment(this.date)]
        this.queryParam.createTime_begin = this.date
        this.queryParam.createTime_end = this.date
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      onDateChange(value, dateString) {
        this.queryParam.createTime_begin=dateString[0];
        this.queryParam.createTime_end=dateString[1];
      },
      getWeatherData(){
       getAction(this.url.list,this.queryParam).then((res)=>{
         if(res.success){
           this.visitInfo = res.result.records.map(item=>({'noises':item.noises || '0','pm25s':item.pm25s || '0','pm1s':item.pm1s || '0','mhumis':item.mhumis || '0','type':item.createTime.slice(0,10)+','+item.createTime.substring(11)}))
           // this.visitInfo = res.result.records.map(item=>({'noises':item.noises,'pm25s':item.pm25s,'pm1s':item.pm1s,'mhumis':item.mhumis,'type':item.createTime.substring(11)}))
         }else{
           this.$error({ content: res.message})
         }
       });
      },
      reSet(){
        this.initDate()
        this.$nextTick(()=>{
           this.getWeatherData()
        })
      },
      handleCancel () {
        this.close()
      },
      
    }
  }
</script>

<style>
  .empty{
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>